<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>游戏主页面</title>
    <link href="css/gameHome.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.11.3.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="plugins/webuploader-0.1.5/webuploader.css"
    />
    <link
      href="plugins/jquery-ui-1.13.0.custom/jquery-ui-1.13.0.custom/jquery-ui.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      type="text/javascript"
      src="plugins/webuploader-0.1.5/webuploader.js"
    ></script>
    <script
      type="text/javascript"
      src="plugins/jquery-ui-1.13.0.custom/jquery-ui-1.13.0.custom/jquery-ui.js"
    ></script>
  </head>

  <body>
    <div class="maindiv">
      <div class="topdiv">
        <div class="userInfo">
          <ul>
            <li onclick="show_page('createRoom.html',this)">创建房间</li>
            <li onclick="show_page('RoomList.html',this)">加入房间</li>
            <li onclick="show_page('happybeanlist.html',this)">欢乐豆记录</li>
            <li onclick="show_page('orderlist.html',this)">订单记录</li>
            <li onclick="show_page('buybean.html',this)">欢乐豆充值</li>
          </ul>
        </div>
      </div>
      <div class="alldiv">
        <div class="leftdiv_mian">
          <div class="leftdiv">
            <div class="avatadiv">
              <img id="header" src="image/默认头像.jpg" alt="无" />
              <span id="nickname">无敌</span>
            </div>
            <div class="beandiv">
              <i></i>
              <span id="happybean">两百万</span>
            </div>
            <div class="logoutdiv">
              <div id="filePicker" class="update_header_btn">更换头像</div>
              <a onclick="logout()">退出登录</a>
            </div>
          </div>
        </div>
        <div class="centerdiv">
          <iframe
            id="iframe"
            name="iframeContext"
            class="iframe_mian"
            src="welcome.html"
          >
          </iframe>
        </div>
      </div>
    </div>
    <div id="sharePay" style="display: none">
      <div class="sharePay_div">
        <span id="sharePay_title"></span>
        <div class="sharePay_div_butten">
          <a class="sharePay_div_butten_yes" onclick="sharePay()">是</a>
          <a class="sharePay_div_butten_no" onclick="closeSharePay()">否</a>
        </div>
      </div>
    </div>
    <div id="paydialog" style="display: none">
      <div class="paydialog_div">
        <span>支付是否完成？</span>
        <div class="paydialog_buttendiv">
          <a class="paydialog_buttendiv_yes" onclick="payQuery()">支付已完成</a>
          <a class="paydialog_buttendiv_no" onclick="payError()"
            >支付遇到问题</a
          >
        </div>
      </div>
    </div>
    <div id="joinRoomdialog" style="display: none">
      <div class="joinRoomdialog_div">
        <div class="joinRoomdialog_input">
          <i></i>
          <input
            style="font-size: 20px"
            type="text"
            id="joinRoomPass"
            placeholder="请输入房间密码"
          />
        </div>
        <div class="joinRoomdialog_buttendiv">
          <a class="joinRoomdialog_buttendiv_a" onclick="joinRoomShera()"
            >加入</a
          >
        </div>
      </div>
    </div>
    <script>
      $(function () {
        //直接初始化上传控件
        initWebUploader();

        //获取登录的用户凭证
        var username = localStorage.getItem("username");
        //获取用户名
        var nickName = localStorage.getItem("nickname");
        //获取头像
        var header = localStorage.getItem("header");
        //获取用户的欢乐豆数量
        var happyBean = localStorage.getItem("happyBean");

        //判断是否已经登录
        if (username == null) {
          //获取登录的用户凭证
          var username = sessionStorage.getItem("username");
          //获取用户名
          var nickName = sessionStorage.getItem("nickname");
          //获取头像
          var header = sessionStorage.getItem("header");
          //获取用户的欢乐豆数量
          var happyBean = sessionStorage.getItem("happyBean");
        }
        if (username == null) {
          location.href = "login.html";
        }

        //判断是否存在头像
        if (header != "null") {
          //替换掉默认头像
          $("#header").attr(
            "src",
            "http://localhost:8080/img/getImg?imageName=" + header
          );
        }

        $("#happybean").html(happybeanNumberConverse(happyBean + ""));
        //替换昵称
        $("#nickname").html(nickName);
      });

      function happybeanNumberConverse(happyNumber) {
        var reust;
        var Billion;
        var Thousand;
        var Hundred;
        var len;
        var regex = /^\d{9,}$/;
        if (happyNumber.match(regex) == null) {
          regex = /^\d{5,}$/;
          if (happyNumber.match(regex) == null) {
            return happyNumber;
          } else {
            Thousand = parseInt(happyNumber / 10000);
            len = Thousand.toString().length;
            console.log(len);
            if (len == 1) {
              Hundred = parseInt(happyNumber / 10);
              reust = Hundred / 1000;
            }
            if (len == 2) {
              Hundred = parseInt(happyNumber / 100);
              reust = Hundred / 100;
            }
            if (len == 3) {
              Hundred = parseInt(happyNumber / 1000);
              reust = Hundred / 10;
            }
            if (len == 4) {
              Hundred = parseInt(happyNumber / 10000);
              reust = Hundred;
            }
            return reust + "&nbsp;万";
          }
        } else {
          Billion = parseInt(happyNumber / 100000000);
          len = Billion.toString().length;
          if (len == 1) {
            Thousand = parseInt(happyNumber / 100000);
            reust = Thousand / 1000;
          }
          if (len == 2) {
            Thousand = parseInt(happyNumber / 1000000);
            reust = Thousand / 100;
          }
          if (len == 3) {
            Thousand = parseInt(happyNumber / 10000000);
            reust = Thousand / 10;
          }
          if (len == 4) {
            Thousand = parseInt(happyNumber / 100000000);
            reust = Thousand;
          }
          return reust + "&nbsp;亿";
        }
      }

      function initWebUploader() {
        // 初始化Web Uploader
        var uploader = WebUploader.create({
          // 选完文件后，是否自动上传。
          auto: true,
          // swf文件路径
          swf: "plugins/Uploader.swf",
          // 文件接收服务端。
          server: "http://localhost:8080/img/uploader",
          // 选择文件的按钮。可选。
          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
          pick: "#filePicker",
          //上传图片时，额外携带的数据
          formData: {
            username: localStorage.getItem("username"),
          },
        });

        //设置上传成功的回调
        uploader.on("uploadSuccess", function (file, response) {
          // alert(response._raw);

          //更新本地的localStorage
          localStorage.setItem("header", response._raw);

          //更新头像地址
          $("#header").attr(
            "src",
            "http://localhost:8080/img/getImg?imageName=" + response._raw
          );
        });

        uploader.on("uploadError", function () {
          alert("图像太大，请换一张上传");
        });
      }
      function logout() {
        localStorage.removeItem("nickname");
        localStorage.removeItem("header");
        localStorage.removeItem("username");
        localStorage.removeItem("happyBean");
        localStorage.removeItem("uid");
        //跳转到登录页面
        location.href = "login.html";
      }

      function show_page(page, btn) {
        $("li").removeClass("isPlay");
        $(btn).addClass("isPlay");
        iframeContext.location.href = page;
      }
      function setiframeHight(hight) {
        $("#iframe").height(hight);
      }
      function setHappyBeanNumber(beanNumber) {
        $("#happybean").text(beanNumber);
      }

      var Money;
      function openSharePay(money) {
        Money = money;
        $("#sharePay_title").html(
          "是否花费" +
            money +
            "元购买" +
            happybeanNumberConverse((money * 100).toString()) +
            "欢乐豆？"
        );
        $("#sharePay").dialog({
          title: "购买确认",
          width: "500",
          height: "200",
        });
      }
      function closeSharePay() {
        $("#sharePay").dialog("close");
      }
      function sharePay() {
        $("#sharePay").dialog("close");
        createOrder(Money);
      }
      var orderId = null;
      function createOrder(MoneyNumber) {
        var uid = localStorage.getItem("uid");
        $.ajax({
          type: "POST",
          url: "http://localhost:8080/order/create",
          data: {
            uid: uid,
            money: MoneyNumber,
          },
          success: function (data) {
            orderId = data;
            //将弹出框手动关闭
            // $("#mydialog").dialog("close");

            openQuery(orderId);
            //打开一个新页签，进行支付宝支付
            window.open("http://localhost:8080/order/pay?orderId=" + data);
          },
        });
      }

      function openQuery(orderById) {
        orderId = orderById;

        //弹出一个支付成功的弹出框，让用户支付完成后点击
        $("#paydialog").dialog({
          title: "支付中",
          width: 400,
          height: 200,
        });
      }

      function payQuery(orderById) {
        // alert("查询支付结果的订单：" + orderId);

        //发送请求给后端，进行订单交易的查询
        $.ajax({
          type: "post",
          url: "http://localhost:8080/order/pay/query",
          data: {
            orderId: orderId,
          },
          success: function (data) {
            //data > 0  支付成功  最新的欢乐豆数量
            //data -1 支付还未成功
            if (data > 0) {
              //支付成功
              $("#paydialog").dialog("close");
              //更新浏览器保存的欢乐豆数量
              localStorage.setItem("happyBean", data);
              console.log(data);
              $("#happybean").html(happybeanNumberConverse(data.toString()));
            } else {
              //支付还未成功
              alert("交易未完成！");
            }
          },
        });
      }

      function payError() {
        alert("暂时无法解决这个问题呢");
      }

      function createRoom(roomName, isSub, isPas, password) {
        if (parseInt(localStorage.getItem("happyBean")) < 1000) {
          alert("欢乐豆不足，请充值");
          return;
        }
        window.open(
          "game.html?action=1&info=" +
            roomName +
            "&pass=" +
            password +
            "&isSub=" +
            isSub
        );
      }

      var roomid;
      function joinRoom(rid, ispass) {
        if (parseInt(localStorage.getItem("happyBean")) < 1000) {
          alert("欢乐豆不足，请充值");
          return;
        }
        if (ispass == 0) {
          joinRoom2Pas(rid, "");
        } else {
          roomid = rid;
          $("#joinRoomdialog").dialog({
            title: "加入房间",
            width: 400,
            height: 200,
          });
        }
      }
      function joinRoomShera() {
        var pass = $("#joinRoomPass").val();
        joinRoom2Pas(roomid, pass);
        $("#joinRoomdialog").dialog("close");
        $("#joinRoomPass").val("");
      }

      function joinRoom2Pas(rid, pass) {
        $.ajax({
          type: "post",
          url: "http://localhost:8080/room/joinRoom",
          data: {
            rid: rid,
            pass: pass,
          },
          success: function (data) {
            if (data.code == 400) {
              window.open(
                "game.html?action=0&rid=" +
                  rid +
                  "&roomCode=" +
                  data.ext.roomCode
              );
            } else {
              alert(data.mes);
            }
          },
        });
      }

      function joinSubscrribe(rid) {
        window.open("game.html?action=2&rid=" + rid);
      }
    </script>
  </body>
</html>
